.demo1 {
    background: url(XXXXXXXX);

    /* 背景图像固定 */
    background-attachment: fixed;

    /* 背景图像滚动 */
    background-attachment: scroll;
}

.demo2 {
    /* background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; */
    background: transparent url(XXX) no-repeat fixed top;
}

.demo3 {
    /* 实现背景半透明，最后一个参数是alpha透明度，取值在0～1之间 */
    background: rgb(0, 0, 0, 0.5);
}

/* 盒子模型四大件 */
.box {
    /* 边框（会影响盒子的实际大小） */
    border: royalblue;
    /* 内容 */
    content: none;
    /* 内边距（会影响盒子的实际大小） */
    padding: 0px;
    /* 外边距 */
    margin: 0px;
}

.box_border {
    /* 边框粗细 */
    border-width: 5px;

    /* 边框样式 */
    border-style: none;
    /* 默认无边框 */
    border-style: solid;
    /*实线边框*/
    border-style: dashed;
    /* 虚线边框 */
    border-style: dotted;
    /* 点线边框 */

    /* 边框颜色 */
    border-color: royalblue;

    /* 边框的复合写法 */
    /* 不要求顺序 */
    border: 1px solid blue;

    /* 细线边框（相邻边框合并） */
    border-collapse: collapse;
}

.box_padding {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;

    /* 上下左右内边距都为5px */
    padding: 5px;
    /* 上下内边距为5px，左右内边距为10px */
    padding: 5px 10px;
    /* 上内边距5px，左右内边距10px，下内边距15px */
    padding: 5px 10px 15px;
    /* 上，右，下，左，按照顺时针方向 */
    padding: 5px 10px 15px 20px;

    /* 如果盒子本身没有设置height和width值，则padding则不会撑开盒子 */
}

.box_margin {
    margin-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    /* 简写与padding完全一致 */
}

/* 外边距塌陷的解决方式 */
/* 1、给父元素添加上边框 */
/* 2、给父元素添加上内边距 */
/* 3、给父元素添加 overflow：hidden */

/* 清除内外边距 */
* {
    margin: 0;
    padding: 0;
}